<template>
  <div class="container">
    <div class="sbgl-nav breadcrumb">
      <img src="static/img/shu.png" alt="" />
      <span>计划任务</span>
      <span class="glyphicon glyphicon-chevron-right"></span>
      <span>{{isAdd?'添加计划任务':'修改计划任务'}}</span>
    </div>
    <form class="form-horizontal" @submit.prevent="submit">
      <div class="form-group">
          <label for="inputtext" class="col-sm-2 control-label col-sm-offset-3">任务名称：</label>
          <div class="col-sm-4">
            <input type="text" class="form-control" id="inputtext" v-model="plan.planname">
          </div>
      </div>
      <div class="form-group">
          <label class="col-sm-2 control-label col-sm-offset-3">任务事件：</label>
           <div class="col-sm-4"> 
            <select class="form-control luxiang_xz" name="parentgroupid" v-model="plan.tasktype">
              <option value="0">录像</option>
            </select>
          </div>
      </div>
      <div class="form-group">
          <label class="col-sm-2 control-label col-sm-offset-3">循环周期：</label>
          <div class="col-sm-4">  
            <select class="form-control luxiang_xz" name="parentgroupid" v-model="plan.loopflag">
              <option value="0">每天</option>
              <option value="1">每周</option>
              <option value="2">每月</option>
            </select>
          </div>
      </div>
      <div class="form-group" v-if="plan.loopflag === '1'">
          <label class="col-sm-2 control-label col-sm-offset-3">每周范围：</label>
          <div class="col-sm-3">
            <div class="input-group">
              <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)" placeholder="0~6" v-model="plan.begloop">
              <span class="input-group-addon">~</span>
              <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)" placeholder="0~6" v-model="plan.endloop">
            </div>
          </div>
      </div>
      <div class="form-group" v-if="plan.loopflag === '2'">
          <label class="col-sm-2 control-label col-sm-offset-3">每月范围：</label>
          <div class="col-sm-3">
            <div class="input-group">
              <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)" placeholder="0~31" v-model="plan.begloop">
              <span class="input-group-addon">~</span>
              <input type="text" class="form-control" aria-label="Amount (to the nearest dollar)" placeholder="0~31" v-model="plan.endloop">
            </div>
          </div>
      </div>
      <div class="form-group">
          <label for="inputtext2" class="col-md-2 control-label col-md-offset-3">开始日期：</label>
          <div class="col-md-3">
            <Date-picker type="date" placeholder="选择日期" v-model="plan.begdate"></Date-picker>
          </div>
          <label for="inputtext2" class="col-md-1 control-label">开始时间：</label>
          <div class="col-md-2">
            <Time-picker format="HH:mm" placeholder="选择时间" v-model="plan.begtime"></Time-picker>
          </div>
      </div>
      <div class="form-group">
          <label for="inputtext2" class="col-md-2 control-label col-md-offset-3">结束日期：</label>
          <div class="col-md-3">
            <Date-picker type="date" placeholder="选择日期" v-model="plan.enddate"></Date-picker>
          </div>
          <label for="inputtext2" class="col-md-1 control-label">结束时间：</label>
          <div class="col-md-2">
            <Time-picker format="HH:mm" placeholder="选择时间" v-model="plan.endtime"></Time-picker>
          </div>
      </div>
      <div class="form-group">
          <label for="inputnumber2" class="col-sm-2 control-label col-sm-offset-3">设备名称：</label>
          <div class="col-sm-4">
            <div class="jhrw-tab-one">
              <table class="table table-bordered jsgl-tab-one-tab" v-model="plan.deviceid">
                <tbody> 
                  <tr v-for="item in devicelist">
                    <td width="1%" class="list-one"><input type="checkbox" v-model="selDeviceIds" v-bind:value="item.deviceid"></td>
                    <td width="20%" class="list-one">{{item.devicename}}</td>
                    <td class="list-one">{{item.deviceid}}</td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>
      </div>
      <p class="lx_btn">
        <button type="submit" class="btn btn-default btn-lg">保存</button>
        <button type="button" onclick="window.history.go(-1)" class="btn btn-default btn-lg">返回</button>
      </p>
    </form> 
  </div>
</template>

<script>
  import axios from 'axios'
  import 'iview/dist/styles/iview.css'
  import _ from 'lodash'

  export default {
    name: 'AddPlan',
    data: function () {
      return {
        planId: this.$route.params.roleId,
        method: this.$route.params.method || 'add',
        devicelist: [],
        selDeviceIds: [],
        plan: {
          deviceid: '',
          begdate: '',
          enddate: '',
          begloop: '',
          endloop: '',
          begtime: '',
          endtime: '',
          loopflag: 0,
          tasktype: 0,
          userid: '',
          planname: ''
        },
        pickerOptions0: {
          disabledDate (time) {
            return time.getTime() < Date.now() - 8.64e7
          }
        }
      }
    },
    computed: {
      isAdd: function () {
        return this.method === 'add'
      },
      selArray: function () {
        var selArray = []
        for (var i in this.selDeviceIds) {
          var item = this.selDeviceIds[i]
          var selObj = this.devicelist.find(function (o) {
            return o.deviceid === item
          })
          selArray.push({
            deviceid: selObj.deviceid,
            planname: this.plan.planname
          })
        }
        return selArray
      }
    },
    created: function () {
      if (!this.isAdd) {
        this.editInit()
      }
      this.deviceInit()
    },
    methods: {
      submit: function () {
        var data = {
          method: 'BatAddPlan',
          array: this.selArray
        }
        data = _.extend(data, this.plan)
        if (!this.isAdd) {
          data.method = 'UpdatePlan'
          data.roleid = this.roleId
          data.rolename = this.roleName
        }
        this.$http.post('/api/hedacmdreq', data).then(response => {
          var body = response.data.HedaACK.Body
          if (body.retCode === '0') {
            window.duang.msg(true, body.retMsg)
          }
        })
      },
      editInit: function () {
        var $this = this

        function getRolePrivilege () {
          return $this.$http.post('/api/hedacmdreq', {method: 'RolePrivilege', roleid: $this.roleId})
        }
        function getDevicelist () {
          return $this.devicelist
        }
        // 统一请求，处理，必须要等2个请求全完成才能开始处理该数据
        axios.all([getRolePrivilege(), getDevicelist()]).then(axios.spread((myRes, res) => {
          var body = myRes.data.HedaACK.Body
          if (body.retCode === '0') {
            this.roleName = body.rolename
            var myList = body.devicelist
            for (var i in myList) {
              var item = myList[i]
              this.selDeviceIds.push(item.privilegeid)
            }
          }
        }))
      },
      deviceInit: function () {  // 所有设备初始化
        this.$http.post('/api/hedacmdreq', {method: 'DeviceSearch'}).then(response => {
          var body = response.data.HedaACK.Body
          this.devicelist = body.devicelist || []
        })
      }
    }
  }
</script>
